import React from 'react';
import type { LoadingOverlayProps } from '@mantine/core';
import { LoadingOverlay, useMantineTheme } from '@mantine/core';

interface ExtendedLoadingOverlayProps extends LoadingOverlayProps {
  children: React.ReactNode;
}
export const NLoading = React.memo(({ children, ...restProps }: ExtendedLoadingOverlayProps) => {
  const theme = useMantineTheme();
  return (
    <>
      <LoadingOverlay zIndex={theme.other.zIndex.loading} overlayProps={{ blur: 0, opacity: 0.4 }} {...restProps} />
      {children}
      {/* {!restProps.visible && children} */}
    </>
  );
});
